<template>
  <!-- 导航 -->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>主数据</el-breadcrumb-item>
        <el-breadcrumb-item>车间设置</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>

  <!-- 搜索栏-->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-form :model="workShopQuery" inline>

        <el-form-item label="车间编码">
          <el-input v-model="workShopQuery.workShopCode" clearable/>
        </el-form-item>

        <el-form-item label="车间名称">
          <el-input v-model="workShopQuery.workShopName" clearable/>
        </el-form-item>

        <el-form-item>
          <el-button @click="loadWorkShops" type="primary"> <el-icon><Search /></el-icon>&nbsp搜索</el-button>
          <el-button @click="referWorkShops"> <el-icon><Refresh /></el-icon>&nbsp重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

  <!-- 工具栏 -->
  <el-row style="margin: 0px 10px;padding: 0px 10px">
    <el-col :span="24">
      <el-button @click="toAddWorkShop" type="primary" plain><el-icon><Plus /></el-icon>新增</el-button>
      <el-button @click="toEdits" type="success" plain><el-icon><EditPen /></el-icon>修改</el-button>
      <el-button @click="toDeletes" type="danger" plain><el-icon><Delete /></el-icon>删除</el-button>
    </el-col>
  </el-row>

  <!-- 数据列表 -->
  <el-row style="margin: 10px 10px;padding:0px 15px;">
    <el-col :span="24">
      <el-table :data="workShops" border stripe ref="workShopTable">
        <el-table-column type="selection" width="70"/>
        <el-table-column prop="workShopCode" width="150px" label="车间编码">
          <template #default="scope">
            <el-link @click="showDetail(scope.row.workShopId)" type="success">
              {{ scope.row.workShopCode }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="workShopName" label="车间名称"/>
        <el-table-column prop="area" label="面积"/>
        <el-table-column property="charge" label="负责人"/>
        <el-table-column prop="workShopStatus" label="是否启用">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.workShopStatus == 1">是</el-tag>
            <el-tag type="danger" v-if="scope.row.workShopStatus == 2">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注"/>

        <el-table-column label="操作" width="330">
          <template #default="scope">
            <el-link @click="toEditWorkShop(scope.row.workShopId)" style="margin: 0px 5px" type="primary"><el-icon><EditPen /></el-icon>修改</el-link>
            <el-popconfirm width="200"
                           confirm-button-text="必须删"
                           cancel-button-text="点错了"
                           @confirm="deleteWorkShopById(scope.row.workShopId)"
                           title="您确定要删除这条数据吗？">
              <template  #reference>
                <el-link style="margin: 0px 5px" type="primary">
                  <el-icon><Delete /></el-icon>删除
                </el-link>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

  <el-footer>
    <!--  分页栏 -->
    <el-row :span="5" style="margin-left: 1020px">
      <el-col :span="1.5" style="color: dimgray;padding: 10px;margin-top: 5px">
        共 {{total}} 条
      </el-col>
      <el-col :span="2" style="padding: 10px">
        <el-pagination @change="changePage" background layout="prev, pager, next" :total="total"/>
      </el-col>
    </el-row>
  </el-footer>

  <!-- 新增弹窗组件 -->
  <workShopAdd @cancelWorkShopAdd="cancelWorkShopAdd"
           @add-complete="addWorkShopComplete"
           :is-show="addWinIsShow"
           style="margin-top: 100px"/>

  <!-- 编辑弹窗组件 -->
  <workShopEdit :workShop-id="editWorkShopId"
            @cancel-workShop-edit="cancelWorkShopEdit"
            @edit-complete="editComplete"
            style="margin-top: 30px"/>
  <!-- 详情子组件 -->
  <workShopDetail :workShop-id="detailWorkShopId"
                  @cancel-workShop-detail="cancelWorkShopDetail"
                  style="margin-top: 30px"/>
</template>

<script setup>
import {ref, onMounted} from "vue";
import workShopRequest from "@/api/workShop.js";
import {ElMessage} from "element-plus";
import {ElMessageBox} from 'element-plus'
import workShopAdd from "@/views/md/workShop/workShop-add.vue";
import workShopEdit from "@/views/md/workShop/workShop-edit.vue";
import workShopDetail from "@/views/md/workShop/workShop-detail.vue";
// 封装搜索数据的对象
let workShopQuery = ref({})
// 查询的项目列表
let workShops = ref([]);
// 总条数，默认0
let total = ref(0);
// 当前页码，默认1
let curPage = ref(1);
let workShopTable = ref(null);
//新增窗口
let addWinIsShow = ref(false);

/**
 * 工具栏新增单位事件
 */
function toAddWorkShop(){
  addWinIsShow.value = true;
}

/**
 * 新增单位完成的监听事件
 */
function addWorkShopComplete(){
  cancelWorkShopAdd();
  loadWorkShops();
}

/**
 * 取消新增的事件
 */
function cancelWorkShopAdd(){
  addWinIsShow.value = false;
  loadWorkShops();
}

/**
 * 工具栏编辑按钮事件
 */
function toEdits(){
  let selectedRows = workShopTable.value.getSelectionRows();
  if(selectedRows.length > 1){
    ElMessage({
      type:"warning",
      message:"编辑只能编辑一条数据"
    });
  }else if (selectedRows.length == 0){
    ElMessage({
      type:"warning",
      message:"你没有选中任何数据"
    });
  }else{
    toEditWorkShop(selectedRows[0].workShopId);
  }
}

// 当前要编辑的分类的编号，默认是-1
let editWorkShopId = ref(-1);

/**
 * 行级编辑按钮事件
 * @param workShopId
 */
function toEditWorkShop(workShopId){
  loadWorkShops();
  editWorkShopId.value = workShopId;
}

/**
 * 编辑完成的事件
 */
function editComplete(){
  // 更新数据表
  cancelWorkShopEdit();
  loadWorkShops();
}

/**
 * 编辑取消的事件
 */
function cancelWorkShopEdit(){
  // 将 editWorkShopId 修改为-1
  editWorkShopId.value = -1;
}

/**
 * 工具栏批量删除按钮事件
 */
function toDeletes(){
  let selectedRows = workShopTable.value.getSelectionRows();
  if (selectedRows.length == 0){
    ElMessage({
      type:"warning",
      message:"你没有选中任何数据"
    });
    return;
  }
  ElMessageBox.confirm(
      '您确定要删除选中的项目吗？',
      'Warning',
      {
        confirmButtonText: '是的',
        cancelButtonText: '点错了',
        type: 'warning',
      }
  ).then(() => {
    let workShopIds = [];
    selectedRows.forEach(row=>{
      workShopIds.push(row.workShopId);
    })

    workShopRequest.deletesWorkShop(workShopIds,res=>{
      if(res.code == 200){
        ElMessage({
          type:"success",
          message:"成功删除[" + res.data + "]条数据"
        })
        loadWorkShops();
      }else{
        ElMessage({
          type:"warning",
          message:"删除失败"
        })
      }
    });
  }).catch(()=>{});
}

/**
 * 行删除按钮事件
 * @param workShopId
 */
function deleteWorkShopById(workShopId) {
  workShopRequest.deleteWorkShopById(workShopId,res => {
    if (res.code === 200) {
      ElMessage.success('删除完成');
      loadWorkShops();
    }
  });
}

// 详情的 workShopId
let detailWorkShopId = ref(-1);

/**
 * 行详情页面按钮事件
 * @param workShopId
 */
function showDetail(workShopId) {
  detailWorkShopId.value = workShopId;
}

/**
 * 详情取消的事件
 */
function cancelWorkShopDetail(){
  // 将 detailWorkShopId 修改为-1
  detailWorkShopId.value = -1;
  loadWorkShops();
}

/**
 * 加载车库列表
 */
function loadWorkShops() {
  // 调用API来查询项目列表
  workShopRequest.loadWorkShops(workShopQuery.value, curPage.value, 10, res => {
    // 这里的res就是后端返回的结果
    // 总条数赋值
    total.value = res.data.total;
    // 将查询的列表赋值给projects
    workShops.value = res.data.list;
  })
}

/**
 * 重置按钮事件
 */
function referWorkShops(){
  workShopQuery.value.workShopCode = null;
  workShopQuery.value.workShopName = null;
  loadWorkShops();
}

// 分页事件
function changePage(value) {
  curPage.value = value;
  loadWorkShops();
}

onMounted(() => {
  loadWorkShops();
})
</script>

<style scoped>

</style>